<!--
 * @Author: Bennty
 * @Date: 2024-12-26 15:05:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-26 15:43:23
 * @Description: 请填写简介
-->
<template>
    <div class="salerExamineRecord-container">
        <div class="record-title">
            <div class="title">
                <el-icon color="rgb(0, 119, 250)"><InfoFilled /></el-icon>
                <span>{{ `付款单${index + 1}` }}</span>
            </div>
            <div class="amount">{{ `本单付款金额：${props.examineDetail.money} 元` }}</div>
        </div>
        <el-form ref="formRef" :model="formData" :rules="rules">
            <el-form-item label="付款日期:">{{ examineDetail.paymentDate }}</el-form-item>
            <el-form-item label="付款方式:">
                {{ `${pay_type.filter((item)=>item.value == props.examineDetail.paymentMethod)[0]?.label} / ${props.shopNames?.filter((item)=>item.value == props.examineDetail.shopName)[0]?.label || '无'}` }}
            </el-form-item>
            <el-form-item label="付款人:">{{ props.examineDetail.createByName }}</el-form-item>
            <el-form-item label="凭证上传:" prop="fileUrl">
                <el-upload
                    class="upload"
                    ref="uploadRef"
                    drag
                    :action="uploadImgUrl"
                    :headers="headers"
                    :limit="1"
                    :on-success="handleSuccess" 
                    :before-upload="beforeUpload"
                    :on-exceed="handleExceed"
                    :auto-upload="true"
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        拖动文件 到这里 或 <em>点击上传</em>
                        <br />
                        csv/png/jpg
                    </div>
                </el-upload>
            </el-form-item>
            <span class="sampleNumber" v-if="props.examineDetail.sampleNumber != 0">
                *在同日期下有{{props.examineDetail.sampleNumber}}笔价格相同的付款信息，请慎重核对后在进行审核
            </span>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance,UploadInstance, UploadProps,UploadRawFile } from 'element-plus';
import { globalHeaders } from "@/utils/request";
import { genFileId } from 'element-plus';

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
const uploadRef = ref<UploadInstance>();
const fileTypes = import.meta.env.VITE_APP_FILE_TYPE.split(',');
const props = defineProps<{
    examineDetail: any,
    index: number,
    pay_type: any[]
    shopNames: any[],
}>();

const formRef = ref<FormInstance>();
const formData = ref({
    fileUrl: undefined
});

const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (!fileTypes.includes(rawFile.type)) {
        ElMessage.error('图片格式与要求不符')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片不可超过 5MB!')
        return false
    }
    return true
};

const handleSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    // console.log(URL.createObjectURL(uploadFile.raw!),response);
    //@ts-ignore
    // formData.value.imageUrl = URL.createObjectURL(uploadFile.raw!);
    formData.value.fileUrl = response.data.url;
};

const rules = reactive({
    fileUrl:[
        {required: true, message: '必须上传凭证', trigger: 'blur'}
    ]
})

const handleExceed: UploadProps['onExceed'] = (files) => {
    uploadRef.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadRef.value!.handleStart(file)
};

const validateForm = () => {
    return formRef.value?.validate();
};

const handleExamineClose = () => {
    return uploadRef.value?.clearFiles();
};

const emitSubmitData = () => {
    const submitData = {
        businessId: props.examineDetail.businessId,
        id: props.examineDetail.id,
        money: props.examineDetail.money,
        paymentMethod: props.examineDetail.paymentMethod,
        shopName: props.examineDetail.shopName,
        paymentDate: props.examineDetail.paymentDate,
        type: props.examineDetail.type,
        ...formData.value
    };
    return submitData
};

defineExpose({
    validateForm,
    handleExamineClose,
    emitSubmitData
});

</script>

<style lang="scss" scoped>
.salerExamineRecord-container{
    margin-top: 15px;
    border-top: solid 1px rgba(128,128,128,0.3);
    width: 100%;
    .record-title{
        margin-top: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: bolder;
        margin-bottom: 12px;
    }
    .title{
        display: flex;
        align-items: center;
        span{
            display: inline-block;
            margin-left: 5px;
        }
    }
    .el-form-item{
        margin-bottom: 10px;
        padding-left: 23px;
        font-size: 16px;
    }
    .upload{
        width: 30%;
        ::v-deep(.el-upload-dragger){
            height: 95px;
            padding: 20px 10px;
            .el-icon{
                font-size: 20px;
                margin-bottom: 5px;
                line-height: 20px;
            }
            .el-upload__text{
                font-size: 13px;
                line-height: 13px;
            }
        }
    }
    .sampleNumber{
        display: block;
        color: red;
        margin-top: 5px
    }
}
</style>